<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <sticky :z-index="10" :class-name="'sub-navbar published'">
       
        <el-button
          v-loading="loading"
          style="margin-left: 90%"
          type="success"
          @click="submitForm"
        >
          提交
        </el-button>
      </sticky>
      </div>
      <div style="height: 100%">
        <el-row>
          <el-col :span="24">
            <!--占整行-->
            <el-form ref="dataForm" :model="demo" :rules="demoRules">
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="username" style="margin-top:25px">
                    <md-input
                      v-model="demo.username"
                      icon="el-icon-search"
                      name="username"
                      placeholder="用户名"
                    >
                      用户名
                    </md-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="name" style="margin-top:25px">
                    <md-input
                      v-model="demo.name"
                      icon="el-icon-search"
                      name="name"
                      placeholder="姓名"
                    >
                      姓名
                    </md-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="age" style="margin-top:25px">
                    <md-input
                      v-model="demo.age"
                      icon="el-icon-search"
                      name="age"
                      placeholder="年龄"
                      type="number"
                    >
                      年龄
                    </md-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="email" style="margin-top:25px">
                    <md-input
                      v-model="demo.email"
                      icon="el-icon-search"
                      name="email"
                      placeholder="邮箱"
                    >
                      邮箱
                    </md-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="phone" style="margin-top:25px">
                    <md-input
                      v-model="demo.phone"
                      icon="el-icon-search"
                      name="phone"
                      placeholder="电话号码"
                    >
                      电话号码
                    </md-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="sex" style="margin-top:25px">
                    <md-input
                      v-model="demo.sex"
                      icon="el-icon-search"
                      name="sex"
                      placeholder="性别"
                    >
                      性别
                    </md-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="adress" style="margin-top:25px">
                    <md-input
                      v-model="demo.adress"
                      icon="el-icon-search"
                      name="adress"
                      placeholder="家庭住址"
                    >
                      家庭住址
                    </md-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="org" style="margin-top:25px">
                    <md-input
                      v-model="demo.org"
                      icon="el-icon-search"
                      name="org"
                      placeholder="部门"
                    >
                      部门
                    </md-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
// import { createUser, deletUser, getUserList, updateUser } from '@/api/user'
import MdInput from '@/components/MDinput'
import waves from '@/directive/waves/index.js' // 水波纹指令
import {fetchPerson,updatePerson} from '@/api/user'
import store from '@/store'
import Sticky from '@/components/Sticky'
export default {
  name: 'ComponentMixinDemo',
  components: {
    MdInput,
    Sticky,
  },
  directives: {
    waves,
  },

  created() {

      
      this.fetchData(store.getters.username)
    },

   methods: {
    fetchData(username) {
      fetchPerson(username)
        .then((response) => {
          this.demo = response.data
          console.log(this.demo)

          // just for test
          // this.postForm.title += `   Article Id:${this.postForm.id}`
          // this.postForm.content_short += `   Article Id:${this.postForm.id}`

          // set tagsview title
          // this.setTagsViewTitle()

          // set page title
          // this.setPageTitle()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    submitForm(){
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.loading = true
          // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          // this.temp.author = 'vue-element-admin'
          // this.temp.timestamp = +new Date(this.temp.timestamp)
          console.log(this.demo)
          updatePerson(this.demo).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          this.loading = false
          })
        }
      })
    }
    
  },
  data() {
    const validate = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('请输入六个字符'))
      } else {
        callback()
      }
    }
    return {
      demo: {
        title: '',
        name: '',
        id: '',
        username: '',
        age: '',
        sex: '',
        phone: '',
        email: '',
        adress: '',
        org: '',
      },
      loading: false,
      demoRules: {
        title: [{ required: true, trigger: 'change', validator: validate }],
      },
      articleList: [
        {
          title: '基础篇',
          href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2',
        },
        {
          title: '登录权限篇',
          href: 'https://juejin.im/post/591aa14f570c35006961acac',
        },
        {
          title: '实战篇',
          href: 'https://juejin.im/post/593121aa0ce4630057f70d35',
        },
        {
          title: 'vue-admin-template 篇',
          href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56',
        },
        {
          title: 'v4.0 篇',
          href: 'https://juejin.im/post/5c92ff94f265da6128275a85',
        },
        {
          title: '优雅的使用 icon',
          href: 'https://juejin.im/post/59bb864b5188257e7a427c09',
        },
      ],
    }
  },
}
</script>

<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item {
  min-height: 100px;
}
</style>
